<template>
  <div>
    <div class="el-form-item">
      城市：
      <el-input
        v-model="searchCity"
        style="width: 200px"
        placeholder="请输入要搜索的城市"
        clearable
      />
    </div>

    <div class="el-form-item">
      地址：
      <el-autocomplete
        v-model="searchText"
        class="search-input"
        :fetch-suggestions="querySearch"
        placeholder="请输入内容"
        :trigger-on-focus="false"
        @select="selectPoint"
      >
        <template slot-scope="{ item }">
          <div class="name">{{ item.name }}</div>
        </template>
      </el-autocomplete>
    </div>

    <baidu-map
      class="map"
      :center="{lng:118.649691,lat:24.941118}"
      :zoom="22"
      :scroll-wheel-zoom="true"
      @ready="createMap"
    />

  </div>
</template>

<script>
export default {
  name: 'BmapSelector',
  props: {
    defaultLngLat: {
      type: Array,
      default: () => {
        return [120.545532, 24.941118]
      }
    },
    mapHeight: {
      type: String,
      default: '500px'
    }
  },
  data() {
    return {
      bMap: {},
      BMap: {},

      searchCity: '',

      searchObj: null,
      selectList: [],
      searchList: [],
      searchText: '',
      lngLat: [118.649691, 0],
      address: {
        name: '',
        lat: '',
        lng: ''
      }

    }
  },
  watch: {

    searchCity: {
      handler: function(newCity) {
        this.searchObj = new this.BMap.LocalSearch(newCity || this.bMap)
      },
      immediate: true
    }

  },

  created() {

  },
  mounted() {

  },
  methods: {

    selectPoint(point) {
      this.searchText = point.name

      const currentPoint = new this.BMap.Point(point.lng, point.lat)

      this.bMap.centerAndZoom(currentPoint, 22)

      this.setPosion(point.lng, point.lat)

      const { name, lng, lat } = point

      this.emitAddress(name, lng, lat)
    },

    emitAddress(name, lng, lat) {
      const address = {
        name: name,
        lat: lat,
        lng: lng
      }

      this.$emit('getAddress', address)
    },

    querySearch(queryString, cb) {
      this.searchObj.setSearchCompleteCallback(function(searchResult) {
        let locArr = searchResult.Kr

        locArr = locArr.map((o) => {
          return {
            id: o.uid,
            name: `${o.city}/${o.address}/${o.title}`,
            lng: o.point.lng,
            lat: o.point.lat
          }
        })

        cb(locArr)
      })

      this.searchObj.search(queryString)
    },

    createMap(e) {
      this.bMap = e.map
      this.BMap = e.BMap
      const _this = this
      this.bMap.addEventListener('click', function(e) {
        _this.setPosion(e.point.lng, e.point.lat)
        _this.emitAddress(_this.searchText, e.point.lng, e.point.lat)
      })

      this.searchObj = new this.BMap.LocalSearch(this.bMap)
    },

    setPosion(lng, lat) {
      // 清除所有地图坐标
      this.bMap.clearOverlays()
      // 添加地图坐标
      const point = new this.BMap.Point(lng, lat)
      // 初始化地图
      this.bMap.addOverlay(new this.BMap.Marker(point))
    }
  }
}
</script>
<style scoped>
.map {
  width: 100%;
  height: 470px;
}
.search-input {
  width: 500px;
}
.el-form-item {
  font-size: 13px;
  font-weight: bold;
  margin-left: 40px;
}
</style>

